<template>
    <h3>社团页面创建</h3>
    <el-space alignment="left" style="width: 100%" direction="vertical">
        <el-form>
            <el-form-item label="社团选择">
                <club-select v-model:data="selectedClub" ></club-select>
            </el-form-item>
        </el-form>
        <transition name="el-fade-in">
            <template v-if="selectedClub">
                <el-space
                    alignment="left"
                    style="width: 100%"
                    direction="vertical"
                >
                    <club-page-form
                        v-model:data="upsertPageReq"
                    ></club-page-form>
                    <el-button-group>
                        <el-button
                            type="primary"
                            @click="createClubPage"
                            :loading="createClubPageLoading"
                            >创建/更新</el-button
                        >
                        <el-button @click="showPreviewModal = !showPreviewModal"
                            >预览页面</el-button
                        >
                    </el-button-group>
                    <el-dialog v-model="showPreviewModal" :show-close="true">
                        <div
                            class="preview-container"
                            v-html="upsertPageReq.content.html"
                        ></div>
                    </el-dialog>
                </el-space>
            </template>
        </transition>
    </el-space>
</template>

<script lang="ts">
import ClubPageForm from "@/components/admin/ClubPageForm.vue";
import ClubSelect from '@/components/admin/ClubSelect.vue';
import { IClubModel } from "@/headers/admin/model.h";
import { IUpsertClubPageReq } from "@/headers/admin/reqs.h";
import { useAdminStore } from "@/store/admin";
import {
    UpsertClubPageAction,
} from "@/store/admin/actions/club";
import { useLoadingStatus } from "@/utils";
import { ElMessage } from "element-plus";
import { defineComponent, ref, watch } from "vue";
const defaultUpsertClubReq: IUpsertClubPageReq = {
    club_id: 0,
    title: "",
    content_text: "",
    content: {
        html: "",
        json: {},
        type: "html",
    },
};
export default defineComponent({
    components: { ClubPageForm,ClubSelect },
    setup() {
        const selectedClub = ref<IClubModel|null>(null);
        const store = useAdminStore();
        const upsertPageReq = ref({ ...defaultUpsertClubReq });
        const showPreviewModal = ref(false);
        watch(
            selectedClub,
            (club) => {
                if (!club) return;
                if (!club.page) {
                    upsertPageReq.value = {
                        ...defaultUpsertClubReq,
                    };
                    return;
                }
                upsertPageReq.value = club.page as any;
            },
            { deep: true }
        );
        const { loadingFunc: createClubPage, loading: createClubPageLoading } =
            useLoadingStatus(async function () {
                if (!selectedClub.value) {
                    ElMessage.error({
                        type: "error",
                        message: "请填写社团页面内容",
                    });
                    return;
                }
                const res = await UpsertClubPageAction.getInstance().call(
                    store,
                    {
                        ...upsertPageReq.value,
                        club_id: selectedClub.value?.id ?? 0,
                    }
                );
                ElMessage.success({
                    type: "success",
                    message: `创建/更新成功 id:${res.id}`,
                });
            });

        return {
            selectedClub,
            upsertPageReq,
            createClubPage,
            createClubPageLoading,
            showPreviewModal,
        };
    },
});
</script>
